<template>
  <div class="wallet-address_mod" :class="themeClass">
    <v-loading v-if="loading" />
    <v-nav :title="$t('WalletAddress.Add wallet address')" v-if="isDayTime === false" title_color="#fff"
      :class="themeClass"></v-nav>
    <v-nav :title="$t('WalletAddress.Add wallet address')" v-if="isDayTime === true"></v-nav>
    <div class="wallet-address_mod_box">
      <!-- 选择的货币 -->
      <div class="wallet-address_mod_box_way-of-deposit">
        <van-cell class="moomoo-select" is-link :value="$t('WalletAddress.Currency type')" @click="showPicker = true">
          <template #title>
            <img :src="logo_link" alt="" />
            <span class="custom-title" :class="bgColor">{{ form.currency }}</span>
          </template>
        </van-cell>
      </div>
      <!-- 货币列表 -->
      <div class="select">
        <van-popup v-model="showPicker" position="bottom">
          <van-picker show-toolbar :columns="depositList" @confirm="onConfirm" @cancel="showPicker = false"
            :confirm-button-text="$t('info.info10')" :cancel-button-text="$t('info.info11')" />
        </van-popup>
      </div>
      <!-- 网络列表 -->
      <div class="wallet-address_mod_box_currency-type" :class="themeClass">
        <van-tabs v-model="currencyChild" @click="form.currency_network = currencyChild" type="card" color="#DAAB51">
          <van-tab :title="item.value" :name="item.value" v-for="(item, index) in currencyChildList"
            :key="index"></van-tab>
        </van-tabs>
      </div>
      <!-- 提交表单 -->
      <div class="wallet-address_mod_box_currency-content" v-if="form.currency!='Bank'">
        <div class="moomoo_form">
          <div class="moomoo_form_input">
            <p>{{ $t('WalletAddress.currency address') }}</p>
            <van-field class="input" style="height: auto" v-model="form.currency_address" rows="1" type="textarea"
              autosize :placeholder="$t('WalletAddress.Please enter currency address')" />
          </div>
          <div class="moomoo_form_upload">
            <p>{{ $t('WalletAddress.Currency QR code') }}</p>
            <van-uploader v-model="fileList" :max-count="1" :max-size="5 * 1024 * 1024" @oversize="onOversize"
              :after-read="uploadFile" @delete="form.currency_qr = ''" class="upload" />
          </div>
        </div>
      </div>
      <div v-else>
        <div class="moomoo_form">
          <div class="moomoo_form_input">
            <p>{{ $t('WalletAddress.持卡人姓名') }}</p>
            <van-field class="input" style="height: auto" v-model="form.bank_name" rows="1" type="textarea"
              autosize :placeholder="$t('WalletAddress.请输入持卡人姓名')" />
          </div>
          <div class="moomoo_form_input">
            <p>{{ $t('WalletAddress.所属银行') }}</p>
            <van-field class="input" style="height: auto" v-model="form.bank" rows="1" type="textarea"
              autosize :placeholder="$t('WalletAddress.请输入所属银行')" />
          </div>
          <div class="moomoo_form_input">
            <p>{{ $t('WalletAddress.银行卡号') }}</p>
            <van-field class="input" style="height: auto" v-model="form.bank_number" rows="1" type="textarea"
              autosize :placeholder="$t('WalletAddress.请输入银行卡号')" />
          </div>
        </div>
      </div>
    </div>
    <!-- 提交按钮 -->
    <div class="moomoo-bottom">
      <div class="moomoo-bottom-submit" :class="themeClass">
        <van-button color="#DAAB51" round block @click="addWalletAddress">{{ $t('WalletAddress.Confirm add')
          }}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WalletAddress',
  data() {
    return {
      depositList: [], // 货币列表
      currencyChildList: [], // 货币网络列表
      currencyChild: '', // 货币网络默认
      logo_link: '', // logo
      fileList: [], //图片数据
      showPicker: false, // 显示选择框
      isDayTime: false,
      form: {
        currency: '',
        currency_network: '',
        currency_address: '',
        currency_qr: '',
        bank_name: '',
        bank: '',
        bank_number: '',
      },
      loading: false
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  created() {
    this.getWithdraw()
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  methods: {
    async getWithdraw() {
      this.loading = true
      await this.$https.get('/platform/getWithdraw').then(res => {
        if (res.code === 1 && res.data.length > 1) {
          this.logo_link = res.data[0].logo_link
          this.form.currency = res.data[0].currency
          this.form.currency_network = res.data[0].currency_network[0].value
          this.depositList = res.data.map(item => {
            return {
              text: item.currency,
              currency_network: item.currency_network,
              logo_link: item.logo_link
            }
          })
          this.currencyChildList = res.data[0].currency_network

        }
      })

      if (this.$route.query.currency != undefined) {
        this.depositList.forEach(element => {
          if (element.text == this.$route.query.currency) {
            this.onConfirm(element);
          }
        });
      }
      this.loading = false
    },
    async onConfirm(value) {
      this.currencyChildList = value.currency_network
      this.logo_link = value.logo_link
      this.form.currency = value.text
      this.form.currency_network = this.currencyChildList[0].value
      this.showPicker = false
    },
    async uploadFile(file) {
      if (file.file.type !== 'image/png' && file.file.type !== 'image/jpeg') {
        this.$toast(this.$t('info.info19'))
        this.form.fileList = []
        return
      }
      file.status = 'uploading'
      var formData = new FormData()
      formData.append('file', file.file)
      await this.$https.post('/ajax/upload', formData).then(res => {
        if (res != undefined && res.code == 1) {
          file.status = 'done'
          return (this.form.currency_qr = res.data.file.full_url)
        } else {
          file.status = 'failed'
        }
      })
    },
    onOversize() {
      this.$toast(this.$t('info.info18'))
    },
    async addWalletAddress() {
      if(this.form.currency!='Bank'){
        if (this.fileList.length != 0 && this.fileList[0].status == 'uploading') {
        this.$toast(this.$t('info.info9'))
        return
        }
        if (this.form.currency === '' || this.form.currency_network === '') {
          this.$toast(this.$t('WalletAddress.Select currency type network'))
          return
        }

        if (this.form.currency_address === '') {
          this.$toast(this.$t('WalletAddress.Please enter currency address'))
          return
        }
      }else{
        if (this.form.bank_name === '') {
          this.$toast(this.$t('WalletAddress.请输入持卡人姓名'))
          return
        }
        if (this.form.bank === '') {
          this.$toast(this.$t('WalletAddress.请输入所属银行'))
          return
        }
        if (this.form.bank_number === '') {
          this.$toast(this.$t('WalletAddress.请输入银行卡号'))
          return
        }
      }
     

      this.loading = true
      await this.$https.post('/wallet/addWalletAddress', this.form).then(res => {
        if (res != undefined && res.code == 1) {
          this.$router.go(-1)
        }
      })
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
